<template>
  <create-view
    :body-style="{ height: '100%'}"
    @afterEnter="afterEnter">
    <flexbox
      v-loading="loading"
      direction="column"
      align="stretch"
      class="xr-create">
      <flexbox class="xr-create__header">
        <div v-if="!$slots.title" class="title">{{ title }}</div>
        <slot name="title"/>
        <i
          class="el-icon-close close"
          @click="close"/>
      </flexbox>
      <div class="xr-create__body">
        <slot/>
      </div>
      <div class="xr-create__footer">
        <el-button
          v-if="showCancel"
          @click.native="close">取消
        </el-button>
        <slot name="footer"/>
		<!-- 暂存按钮 默认不显示 -->
        <el-button
          v-if="showHold"
          type="primary"
          @click.native="debouncedSaveField2(false)">{{ confirmButtonText2 }}
        </el-button>
        <el-button
          v-if="showSave"
          type="primary"
          @click.native="debouncedSaveField(false)">{{ confirmButtonText }}
        </el-button>
      </div>
    </flexbox>
  </create-view>
</template>

<script>
  import CreateView from '@/components/CreateView'
  import {debounce} from 'throttle-debounce'

  export default {
    // 创建页面
    name: 'XrCreate',
    components: {
      CreateView
    },
    props: {
      title: String,
      loading: Boolean,
      appendToBody: {
        type: Boolean,
        default: true
      },
      showCancel: {
        type: Boolean,
        default: true
      },
      showSave: {
        type: Boolean,
        default: true
      },
      confirmButtonText: {
        type: String,
        default: '保存'
      },
	  // 暂存按钮 默认false
	  showHold: {
	    type: Boolean,
	    default: false
	  },
      confirmButtonText2: {
        type: String,
        default: '暂存'
      },
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    created() {
      this.debouncedSaveField = debounce(300, this.save)
	  // 暂存方法
      this.debouncedSaveField2 = debounce(300, this.hold)
    },
    mounted() {
      if (this.appendToBody) {
        document.body.appendChild(this.$el)
      }
    },

    destroyed() {
      if (this.appendToBody) {
        if (this.$el && this.$el.parentNode) {
          this.$el.parentNode.removeChild(this.$el)
        }
      }
    },
    methods: {
      afterEnter() {
        this.$emit('afterEnter')
      },

      save() {
        this.$emit('save')
      },

      hold() {
        this.$emit('hold')
      },

      close() {
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .xr-create {
    position: relative;
    height: 100%;

    &__header {
      height: 40px;
      margin-bottom: 20px;
      padding: 0 10px;
      flex-shrink: 0;
      .title {
        flex: 1;
        font-size: 17px;
        color: #333;
        font-weight: bold;
      }
      .close {
        display: block;
        font-size: 24px;
        color: #909399;
        margin-right: -10px;
        padding: 10px;
        cursor: pointer;
      }
      .close:hover {
        color: $xr-color-primary;
      }
    }

    &__body {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      flex: 1;
    }

    &__footer {
      position: relative;
      text-align: right;
      padding: 5px 20px 0;
    }
  }
</style>
